@use "../../styles/variables";

.input-wrapper {
  display: flex;
  width: 100%;
  position: relative;

  .input-inner-wrapper{
    flex: 1;
    position: relative;
    display: flex;
  }
  .icon-prefix,
  .icon-suffix {
    position: absolute;
    height: 100%;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    color: variables.$input-color;
    
    svg{
      color: variables.$input-placeholder-color;
    }

  }

  .icon-prefix {
    left: 0;
    
  }

  .icon-suffix {
    right: 0;
  }
  
  &.is-disabled .icon-prefix,
  &.is-disabled .icon-suffix {
    cursor: not-allowed;
    svg {
      color: variables.$input-disabled-color;
    }
  }
}



.icon-prefix+.input-inner{
  padding-left: 35px;
}

.input-inner:has(+ .icon-suffix){
  padding-right: 35px;
}

.input-inner{
  width: 100%;
  padding: variables.$input-padding-y variables.$input-padding-x;
  font-family: variables.$input-font-family;
  font-size: variables.$input-font-size;
  font-weight: variables.$input-font-weight;
  line-height: variables.$input-line-height;
  color: variables.$input-color;
  background-color: variables.$input-bg;
  border: variables.$input-border-width solid variables.$input-border-color;
  border-radius: variables.$input-border-radius;
  transition: variables.$input-transition;

  &:focus{
    color: variables.$input-focus-color;
    background-color: variables.$input-focus-bg;
    border-color: variables.$input-focus-border-color;
    outline: 0;
    box-shadow: variables.$input-focus-box-shadow;
  }

  &::placeholder{
    opacity: 1;
    color: variables.$input-placeholder-color;
  }

  &:disabled,
  &[readonly]{
    opacity: 1;
    background-color: variables.$input-disabled-bg;
    border-color: variables.$input-disabled-border-color;
    cursor: not-allowed;
  }
}

.nested-prepend,
.nested-append{
  display: flex;
  align-items: center;
  padding: 0 variables.$input-padding-x;
  margin-bottom:0 ;
  font-size: variables.$input-font-size;
  color: variables.$input-color;
  background-color: variables.$input-bg;
  border: variables.$input-border-width solid variables.$input-border-color;
  border-radius: variables.$input-border-radius;
  text-align: center;
  white-space: nowrap;
}

.input-group {
  .nested-prepend + .btn {
    padding: 0;
    margin: 0;
  }
}

.input-group {
  &.input-group-append {
    .input-inner {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
  
  &.input-group-prepend {
    .input-inner {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
  
  > .nested-prepend {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  
  > .nested-append {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.input-wrapper {
  &.input-size-sm {
    .input-inner {
      padding: variables.$input-padding-y-sm variables.$input-padding-x-sm;
      font-size: variables.$input-font-size-sm;
      border-radius: variables.$input-border-radius-sm;
    }
    
    .nested-prepend,
    .nested-append {
      padding: 0 variables.$input-padding-x-sm;
      font-size: variables.$input-font-size-sm;
    }
  }
  
  &.input-size-lg {
    .input-inner {
      padding: variables.$input-padding-y-lg variables.$input-padding-x-lg;
      font-size: variables.$input-font-size-lg;
      border-radius: variables.$input-border-radius-lg;
    }
    
    .nested-prepend,
    .nested-append {
      padding: 0 variables.$input-padding-x-lg;
      font-size: variables.$input-font-size-lg;

    
    }
  }
}
